/*
 * @description: 描述
 * @Author: 问道师兄木木木
 * @Date: 2021-02-03 14:28:05
 * @LastEditors: 问道师兄木木木
 * @LastEditTime: 2021-02-05 16:32:47
 */


 // 接口
// TypeScript 的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

// 接口初探

interface LabelledValue {
    label: string;
}

// LabelledValue 接口就好比一个名字，用描述上面例子里的要求。它代表了有一个label属性且类型为string的对象。
// 需要注意的是，我们在这里并不能像在其他语言里一样，说传给 printLabel 的对象实现了这个接口。
// 我们只会去关注值的外形.只要传入的对象满足上面提到的必要条件,那么它就是被允许的.

// 还有一点值得提的是,类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以.

function printLabel(labelledObj: LabelledValue ){
    console.log(labelledObj.label);
}

let myObj = {
    size: 10,
    label: "Size 10 Object"
};

printLabel(myObj);


// 可选属性

// 接口里的属性不全都是必需的.有些是只在某些条件下存在,或者根本不存在.可选属性在应用"option bags"模式时很常用,即给函数传入的参数对象中只有部分属性赋值了.

interface SquareConfig{
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number}{
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});
console.log(mySquare);

// 只读属性

// 一些对象属性只能在对象刚刚创建的时候修改其值.你可以在属性名前面readonly 来指定只读属性;

interface Point {
    readonly x: number;
    readonly y: number;
}

let p1: Point = { x: 10, y: 20};
// p1.x = 5;   /* 只读属性  error */ 

// TypeScript具有 readonlyArray<T>类型,它与Array<T>相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改:

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<Number> = a;
// ro[0] = 12;  /** error! */
// ro.push(5); /** error! */
// ro.length = 100; /** error! */
// a = ro; /** error! */

//  上面代码的最后一行,可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的.但是你可以永类型断言重写

a = ro as number[];

// readonly VS const

// 最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性.做为变量使用的话用const,若做为属性则使用readonly 



// 额外的属性检查

// 我们在第一个例子里使用了接口，TypeScript让我们传入{size: number; label: string; }到仅期望得到{label: string }的函数里。我们已经学过了可选属性，并且知道他们在“option bags"模式里很有用。

// 然而，天真地将这两者结合的话就会像在JavaScript里那样搬起石头砸自己的脚。比如，拿 createSquare 例子来说：

interface SquareConfig1 {
    color?: string;
    width?: number;
    [propName: string]: any; /** 字符串索引签名 */  
    // 前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性
}

function createSquare1(config: SquareConfig1):{color: string; area: number}{
    // ...
    let newSquare = {color: "white", area: 100};
    return newSquare;
}

// let mySquare1 = createSquare1({ colour: "red", width: 100}); 

// 注意传入createSquare的参数拼写为colour而不是color。 在JavaScript里，这会默默地失败。
// 你可能会争辩这个程序已经正确地类型化了，因为width属性是兼容的，不存在color属性，而且额外的colour属性是无意义的。

// let mySquare1 = createSquare1({ width: 100, opacity: 0.5} as SquareConfig1); 

let squareOptions = { colour: "red", width: 100};
let mySquare1 = createSquare1(squareOptions);

console.log(mySquare1,'>>>>>>');


// 函数类型


// 接口能够描述JavaScript 中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型

// 为了使用接口表示函数类型,我们需要给接口定义一个调用签名.它就像一个只有参数列表和返回值类型的函数定义.参数列表里的每个参数都需要名字和类型.

interface SearchFunc {
    (source: string, subString: string): boolean
}

// 这样定义后,我们可以像使用其他接口一样使用这个函数类型的接口.下例展示了如何创建一个函数类型的变量
// 并将一个同类型的函数复制给这个变量

// let mySearch: SearchFunc;
// mySearch = function(source: string, subString: string) {
//     let result = source.search(subString);
//     return result > -1;
// }

// 对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配.比如,我们使用下面的代码重写上面的例子:

// let mySearch: SearchFunc;
// mySearch = function(src: string, sub: string) : boolean {
//     let result = src.search(sub);
//     return result > -1;
// }

// 函数的参数会逐个进行检查,要求对应位置上的参数类型是兼容的.如果你不想指定类型,TypeScript的类型系统会
// 推断出参数类型,因为函数直接赋值给了SearchFunc类型变量.函数的返回值类型是通过其他返回值推断出来的(此例是 false和true ).
// 如果让这个函数返回数字或字符串,类型检查会警告我们函数的返回值类型与 SearchFunc 接口中的定义不匹配.

// let mySearch: SearchFunc;
// mySearch = function(src, sub){
//     let result = src.search(sub);
//     return result > -1;
// }

let mySearch: SearchFunc = function(src, sub){
    let result = src.search(sub)
    return result > -1;
}

console.log('mySearch', mySearch('1','2'))


// 可索引的类型

// 与使用接口描述函数类型差不多,我们也可以描述那些能够"通过索引得到"的类型,比如a[10]或ageMap["daniel"]
// 可索引类型具有一个索引签名,它描述了对象索引的类型,还有相应的索引返回值类型


interface StringArray {
    [index: number]: string;
}

let myArray: StringArray ;
myArray = ["Bob","Fed"];

let myStr: string = myArray[0];

// 上面例子里,我们定义了StringArray接口,它具有索引签名.这个索引签名表示了当用number去索引
// StringArray时会得到string 类型的返回值。

// TypeScript 支持两种索引签名： 字符串和数字。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串
// 索引返回值类型的子类型。这是因为当使用number来 索引时，JavaScript会将它转换成string 然后再去索引对象
// 也就是说用 100 （ 一个number ） 去索引等同于使用 "100"（ 一个string ) 去索引，因此两者需要保持一致。

/**
 * @description: 动物
 * @param {*}
 * @return {*}
 * @author: 问道师兄木木木
 */
class Animal {
    name: string = "木头"; /** 名称 */
}

/**
 * @description: 狗
 * @param {*}
 * @return {*}
 * @author: 问道师兄木木木
 */
class Dog extends Animal {
    breed: string = "柯基"; /** 品种 */
}

interface NotOkay {
    // [x: number]: Animal; /** 错误: 使用数值型的字符串所以,有时会得到完全不同的Animal! */
    [x: string]: Dog
}

// 字符串索引签名能够很好的描述 dictionary 模式，并且它们也会确保所有属性与其返回值类型相匹配。因为字符串
// 索引声明了 obj.property 和 obj["property"] 两种形式都可以。 下面的例子里， name 的类型与字符串索引
// 类型不匹配,所以类型检查器给出一个错误提示:

interface NumberDictionary {
    [index: string]: number;
    length: number;  /** 可以, length是 number类型 */
    // name: string;    /** 错误，`name`的类型与索引类型返回值的类型不匹配 */
}

// // 最后，你可以将索引签名设置为只读，这样就防止了给索引赋值：
// interface ReadonlyStringArray {
//     readonly [index: number]: string;
// }
// let myArray: ReadonlyStringArray = ["Alice","Bob"];
// myArray[2] = "Mallory"; /** error! */

// 你不能设置 myArray[2]，因为索引签名是只读的。



// 类 类型

// 实现接口
// 与C#或Java里接口的基本作用一致,TypeString也能够用它来明确的强制一个类去符合某种契约
// interface ClockInterface {
//     currentTime: Date;
// }

// class Clock implements ClockInterface {
//     currentTime: Date;
//     constructor(h: number, m: number) {}
// }

// 你也可以在接口中描述一个方法,在类里实现它,如同下面 setTime方法一样:
interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): any;
}

class Clock implements ClockInterface {
    currentTime: Date = new Date();
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number,m: number) {
        console.log(h, m, this.currentTime,'>ClockInterface')
    }
}

new Clock(222,333);
// 接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。


// 类静态部分与实例部分的区别

// 当你操作类和接口的时候,你要知道类是具有两个类型的: 静态部分的类型和实例的类型.你会注意到,当你用构造器
// 签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误:
// interface ClockConstructor {
//     new (hour: number, minute: number): any;
// }

// class Clock1 implements ClockConstructor {
//     currentTime: Date = new Date();
//     constructor(h: number,m: number) { }
// }

// 这里因为当一个类实现了一个接口时, 只对其实例部分进行类型检查. constructor 存在于类的静态部分,所以不在
// 检查的范围内.

// 因此,我们应该直接操作类的静态部分.看下面的例子,我们定义了两个接口, ClockConstructor为构造函数所用和ClockInterface为实例方法所用
// 为了方便我们定义一个构造函数 createClock,它用传入的类型创建实例.

interface ClockConstructor {
    new (hour: number, minute:number): ClockInterface1;
}
interface ClockInterface1 {
    tick: Function;
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface1 {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface1 {
    constructor(h: number, m: number) { }
    setTime(d: Date) {
        throw new Error("Method not implemented.");
    }
    tick() {
        console.log("beep beep");
    }
}

class AnalogClock implements ClockInterface1 {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

// 因为 createClock的第一个参数是 ClockConstructor类型,在 createClock(AnalogClock, 7, 32)里,会检查
// AnalogClock 是否符合构造函数的签名.


// 继承接口
// 和类一样,接口也可以相互继承.这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里.

// interface Shape {
//     color: string;
// }

// interface Square extends Shape {
//     sideLength: number;
// }
// let square = <Square>{};
// square.color = "blue";
// square.sideLength = 10;

// console.log('square', square);

// 一个接口可以继承多个接口，创建出多个接口的合成接口

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

console.log('square', square);


// 混合类型

// 先前我们提过, 接口能够描述 JavaScript里丰富的类型.因为 JavaScript其动态灵活的特点,有时你会希望一个对象
// 可以同时具有上面提到的多种类型.

// 一个例子就是, 一个对象可以同时做为函数和对象使用, 并带有额外的属性

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number){ console.log('counter:',start); };
    counter.interval = 123;
    counter.reset = function () { console.log('counter.reset'); }
    return counter;       
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
console.log('c.interval:',c.interval);

// 混合类型

// 先前我们提过,接口能够描述 JavaScript里丰富的类型. 因为 JavaScript其动态灵活的特点.有时你会希望一个对象可以同时具有上面提到的多种类型

// 一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性.

interface Counter1 {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCount1(): Counter1 {
    let counter = <Counter1>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c1 = getCount1();
c(10);
c.reset();
c.interval = 5.0

// 接口继承类

// 当接口继承了一个类类型时，它会继承类的成员但不包括其实现。就好像接口声明了所有类中存在的成员
// 但并没有提供具体实现一样。接口同样会继承到类的 private 和 protected 成员。这意味着当你创建了一个接口继承了一个
// 拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement)。

// 当你有一个庞大继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。这个子类除了继承至基类外与基类没有任何关系。例：
class Control {
    private state: any;
}

interface SelectableControl extends Control {
     select(): void;
}

class Button extends Control implements SelectableControl {
    select() { }
}

class TextBox extends Control {
    select() { }
}

// 错误： "Image" 类型缺少 "state" 属性
// class image implements SelectableControl  {
//     select() { }
// }


class _location {
    
}